<template>
	<view>
		<view class="section">
			<u-grid :border="false">
				<u-grid-item @click="showScoreDesc()">
					<u-image width="45px" height="45px" src="/static/score-get.png"></u-image>
					<text class="grid-text u-m-t-10">获取积分</text>
				</u-grid-item>
				<u-grid-item @click="navTo('/pages/user/scorelog')">
					<u-image width="45px" height="45px" src="/static/score-log.png"></u-image>
					<text class="grid-text u-m-t-10">积分明细</text>
				</u-grid-item>
				<u-grid-item @click="navTo('/pages/scoreshop/order/list')">
					<u-image width="45px" height="45px" src="/static/score-order.png"></u-image>
					<text class="grid-text u-m-t-10">兑换记录</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="section u-padding-30">
			<view class="section-title">
				<view class="label">积分好货</view>
				<view class="my-score" v-if="vuex_token">我的积分 <text> {{vuex_user.score}}</text></view>
			</view>
			<view class="good-list">
				<view class="item" v-for="(item,index) in list">
					<u-image width="200rpx" height="160rpx" mode="aspectFill" :src="item.image"></u-image>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.description}}</view>
						<view class="bottom">
							<view class="score">{{item.score}}积分</view>
							<view class="sale">已兑{{item.ficti_sales}}</view>
							<u-button type="success" @click="navTo('/pages/scoreshop/good/show',{id:item.id})"
								shape="circle" size="mini">兑换
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="score_desc_show" mode="center" width="690" :closeable="true" border-radius="30">
			<view class="score_desc_content">
				<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);">
					<u-parse :html="vuex_config.score_desc"></u-parse>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				is_update: false,
				has_more: false,
				scrollTop: 0,
				status: 'loadmore',
				score_desc_show:false
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserInfoData()
			} else {
				this.$u.vuex('vuex_user', {})
			}
		},
		
		onShareAppMessage(res) {
			return {
				title: '积分商城'
			}
		},
		onShareTimeline() {
			return {
				title: '积分商城'
			}
		},
		methods: {
			getUserInfoData: async function() {
				let res = await this.$u.api.getUserInfo();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});
			},
			getList: async function() {
				let data = {
					page: this.page
				};
				let res = await this.$u.api.getScoreshopGoodList(data);
				this.status = 'nomore';
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (this.is_update) {
					this.list = [];
					this.is_update = false;
				}
				let pageList = res.data;
				this.is_show = true;
				this.has_more = pageList.current_page < pageList.last_page;
				this.list = [...this.list, ...pageList.data];
				this.is_empty = !this.list.length;
			},
			showScoreDesc:function(){
				this.score_desc_show = true;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
	.score_desc_content{
		padding:80rpx 30rpx 50rpx 30rpx;
	}
	.section {
		width: calc(100% - 100rpx);
		overflow: hidden;
		margin: 50rpx auto 0;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.section-title .label {
		font-size: 32rpx;
		font-weight: 600;
	}

	.my-score {
		font-size: 24rpx;
	}

	.my-score text {
		margin-left: 2px;
		color: #59ba9c;
	}

	.good-list .item {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
	}

	.good-list .item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.good-list .item .u-image {
		flex-shrink: 0;
		border-radius: 20rpx !important;
		overflow: hidden !important;
	}

	.good-list .item .info {
		flex-grow: 1;
		padding-left: 20rpx;
		overflow: hidden;
	}

	.good-list .item .title {
		font-size: 32rpx;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.good-list .item .desc {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #999999;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.good-list .item .bottom {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.good-list .item .bottom .sale {
		font-size: 24rpx;
		font-weight: 600;
	}

	.good-list .item .bottom .score {
		font-size: 30rpx;
		color: #59ba9c;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.good-list .item .bottom .u-btn {
		margin-right: 0 !important;
		margin-left: auto !important;
	}
</style>
